<template>
	<view class="rect-select flex-row-between">
		<template v-for="item in options">
			<view class="select-option" :class="{'select-active': item.value === value}" :key="item.value"
				@click="change(item)">
				{{item.label}}
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		props: {
			value: {
				type: [String, Number],
				default: '',
			},
			options: {
				type: Array,
				default: () => [],
			}
		},
		methods: {
			change(item) {
				this.$emit('input', item.value);
			}
		}
	}
</script>

<style scoped lang="scss">
	.rect-select {
		.select-option {
			flex: 1;
			height: 85rpx;
			text-align: center;
			color: #333;
			line-height: 85rpx;
			border: 1px solid #f7f7f7;
			background-color: #f7f7f7;

			&:last-child {
				margin-left: 36rpx;
			}
		}

		.select-active {
			color: #559df2;
			border: 1px solid #559df2;
			background-color: rgba(85, 157, 242, .2);
		}
	}
</style>